<template>
    <div class="container">

        <div class="common-header-wrap">
            <mt-header title="我的佣金" class="common-header">
                <mt-button slot="left" icon="back" @click="goBack"></mt-button>
            </mt-header>
        </div>

        <div class="agent-main">
            <div class="agent-main-left">
                <div class="agent-main-left-title">可提现金额（元）</div>
                <div class="agent-main-left-price">{{user.available_commission}}</div>
            </div>
            <div class="agent-main-right" @click="opensheet">
                提现
            </div>

        </div>

        <div class="agent-switch">
            <div class="agent-switch-list" :class="{'active':type==1}" @click="switchtype(1)">
                佣金记录
            </div>
            <div class="agent-switch-list" :class="{'active':type==2}" @click="switchtype(2)">
                提现记录
            </div>
        </div>
        <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
            <div class="list-wrapper" v-if="agentlist && agentlist.length &&type==1">
                <div class="item" v-for="(item, index) in agentlist" :key="item.id">
                    <label class="title">{{ item.class_name }}</label>
                    <label class="subtitle">{{ item.create }}</label>
                    <label class="date" :class="item.sure_money > 0 ? 'income' : 'expend'">{{ item.sure_money }}</label>
                </div>
            </div>
            <div class="list-wrapper" v-else-if="agentlist && agentlist.length &&type==2">
                <div class="agent-carry" v-for="(item, index) in agentlist" :key="item.id">
                    <div class="agent-carry-left">
                        <div class="agent-carry-head">
                            <div class="agent-carry-head-title">提现</div>
                            <div class="agent-carry-head-time">{{item.create}}</div>
                        </div>
                        <div class="agent-carry-bottom">
                            {{item.bank_name}}：{{item.number}}
                        </div>
                    </div>
                    <div class="agent-carry-right">
                        <div class="agent-carry-price">{{item.money}}</div>
                        <div class="agent-carry-type">{{item.state_name}}</div>
                    </div>
                </div>
            </div>
            <empty-record v-else-if="agentlist && !agentlist.length"></empty-record>
        </div>


        <!--        提现菜单-->
        <mt-actionsheet
                :actions="actions"
                v-model="sheetVisible">
        </mt-actionsheet>

        <!--        提现框-->
        <div v-if="carryshow" class="carry-mask" @click="carrytoggle"></div>
        <div v-if="carryshow" class="carry-model">
            <div class="carry-model-title">提现到余额</div>
            <div class="carry-model-list">
                <div class="carry-model-list-title">金额</div>
                <input class="carry-model-list-title-input" v-model="money" type="text" placeholder="请输入提现金额">
            </div>
            <div class="carry-model-list">
                <div class="carry-model-list-title">支付密码</div>
                <input class="carry-model-list-title-input"  v-model="password" type="text" placeholder="请输入支付密码">
            </div>
            <div class="carry-model-notice">默认支付密码为：123456</div>
            <div v-if="carrytype==2" class="carry-model-list" style="justify-content: space-between;align-items: center" @click="popupshow">
                <div style="display: flex;align-items: center">
                    <div class="carry-model-list-title">收款账户</div>
                    <div v-if="bank" style="color: #888;font-size:.6rem" >{{bank.value}}</div>
                    <div v-if="!bank" style="color: #888;font-size:.6rem" @click.stop="toaddbank">点击添加收款账户</div>
                </div>
                <img style="width: 12px;height: 12px" src="../../../assets/image/home/icon-right.png">
            </div>
            <div class="carry-model-btn" @click="getCarryAdd">确认提现</div>
        </div>

        <mt-popup
                v-model="popupVisible"
                position="bottom">
            <mt-picker :slots="slots" valueKey="value" @change="onValuesChange"></mt-picker>
        </mt-popup>
    </div>
</template>

<script>
    import {getMemberIndex} from '../../../api/member'
    import {getBankList} from '../../../api/memberBank'
    import {getDailyLists, getCarryLists, getCarryAdd} from '../../../api/agent'
    import {Toast, Indicator, Actionsheet,Popup,Picker} from 'mint-ui'
    import EmptyRecord from '../../../components/EmptyRecord'

    export default {
        name: 'Agentlist',
        components: {
            EmptyRecord,
            Popup,
            Picker
        },
        data() {
            return {
                wrapperHeight: 0,
                params: {'page': 0, 'per_page': 10},
                loading: false, // 是否加载更多
                isMore: true, // 是否有更多
                type: 1, //记录类型 1：佣金记录 2：充值记录
                agentlist: false, // 记录数据
                user: '', //用户数据
                sheetVisible: false,
                money: '', //提现金额
                password: '', //支付密码
                bank_id: '', //收款账户ID
                carryshow:false ,//提现框显示
                carrytype:'', //1提现到余额，2提现到账户
                actions: [{
                    name: '提现到余额',
                    method: () => {
                        this.carrytoggle(1)
                    },
                }, {
                    name: '提现到账户',
                    method: () => {
                        this.carrytoggle(2)
                    },
                }],
                slots: [
                    {
                        flex: 1,
                        // values: [{value:'2015-01',id:1}],
                        values: [],
                        className: 'slot1',
                        textAlign: 'center'
                    }
                ],
                popupVisible:false, //收款账号选择框显示
                bank:'' , //选中收款账户信息

            }
        },
        component: {
            Actionsheet,
        },
        created() {

        },

        mounted() {
            this.wrapperHeight = document.documentElement.clientHeight - 90
            this.getMemberIndex();
            this.getBankList();
        },
        methods: {
            loadMore() {
                this.loading = true
                this.params.page = ++this.params.page
                if (this.isMore) {
                    this.loading = false;
                    if (this.type == 1) {
                        this.getDailyLists()
                        // this.getCarryAdd(1)
                    } else {
                        this.getCarryLists();
                        // this.getCarryAdd(2)
                    }
                    // this.getPredepositList(true)
                }
            },
            goBack() {
                this.$router.go(-1)
            },

            //点击提现
            opensheet() {
                if (this.sheetVisible) {
                    this.sheetVisible = false
                } else {
                    this.sheetVisible = true
                }
            },

            //获取用户提现列表
            getBankList(){
                getBankList().then(res=>{
                    let data=res.result.bank_list;
                    let values=[];
                    if(data.length){
                        for(let i=0;i<data.length;i++){
                            values.push({value:data[i].memberbank_name?data[i].memberbank_name+' '+data[i].memberbank_truename+' '+data[i].memberbank_no:'支付宝'+' '+data[i].memberbank_truename+' '+data[i].memberbank_no,id:data[i].memberbank_id})
                        }
                    }
                    this.slots[0].values=values;
                })
            },

            //获取用户信息
            getMemberIndex() {
                getMemberIndex().then(res => {
                    this.user = res.result.member_info
                }).catch(function (error) {
                    Toast(error.message)
                })
            },

            //佣金记录列表
            getDailyLists() {
                Indicator.open()
                getDailyLists(this.params).then(res => {
                    Indicator.close()
                    if (res.result.length == this.params.per_page) {
                        this.isMore = true
                    } else {
                        this.isMore = false
                    }
                    let temp = res.result;
                    if (temp) {
                        if (!this.agentlist) {
                            this.agentlist = temp
                        } else {
                            this.agentlist = this.agentlist.concat(temp)
                        }
                    }
                }).catch(function (error) {
                    Indicator.close();
                    Toast(error.message)
                })
            },

            //佣金提现列表
            getCarryLists() {
                Indicator.open()
                getCarryLists(this.params).then(res => {
                    Indicator.close()
                    if (res.result.length == this.params.per_page) {
                        this.isMore = true
                    } else {
                        this.isMore = false
                    }
                    let temp = res.result
                    if (temp) {
                        if (!this.agentlist) {
                            this.agentlist = temp
                        } else {
                            this.agentlist = this.agentlist.concat(temp)
                        }
                    }
                }).catch(function (error) {
                    Indicator.close();
                    Toast(error.message)
                })
            },

            //切换
            switchtype(type) {
                this.type = type;
                this.loading = false;
                this.isMore = true;
                this.agentlist = false;
                this.params.page = 0;
                this.loadMore();
            },

            //佣金提现接口
            getCarryAdd(carrytype) {
                // Indicator.open()
                getCarryAdd(this.carrytype, this.money, this.password, this.bank.id).then(res => {
                    // Indicator.close()
                    Toast('提现成功');
                    this.carrytoggle();
                    this.getMemberIndex();
                    this.switchtype(1);
                }).catch(function (error) {
                    // Indicator.close()
                    Toast(error.message)
                })
            },

            //提现框显示隐藏
            carrytoggle(type){
                if(type){
                    this.carrytype=type;
                }
                if(this.carryshow){
                    this.carryshow=false;
                }else{
                    this.carryshow=true;
                }
            },

            //账户选择事件
            onValuesChange(res){
               if(res.values[0]){
                    this.bank=res.values[0]
               }
            },

            //账户选择框显示
            popupshow(){
              this.popupVisible=true;
            },

            //前往添加账户
            toaddbank(){
                this.$router.push({name:'MemberBankList'})
            }
        }
    }
</script>

<style scoped lang="scss">

    .container {
        min-height: 100vh;
        /*display: flex;*/
        position: relative;
        /*flex-direction: column;*/
        /*justify-content: flex-start;*/
        /*align-items: stretch;*/
        background: white;

    }

    .carry-mask{
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,.5);
    }

    .carry-model{
        position: fixed;
        height: fit-content;
        width: 80vw;
        box-sizing: border-box;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        box-shadow: 0 0 10px #ccc;
        padding: 20px;
        border-radius: 8px;
        background: white;
        .carry-model-notice{
            color: #b5b5b5;
            font-size: .6rem;
            margin-top: 3px;
        }
        .carry-model-title{
            font-size: .7rem;
            font-weight: bold;
            text-align: center;
            padding-bottom:12px;
            border-bottom:1px solid #efeff2 ;
        }
        .carry-model-list{
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;
            .carry-model-list-title{
                font-size: .7rem;
                width: 80px;
            }
            .carry-model-list-input{
                font-size: .7rem;
                border: none;
            }
        }
        .carry-model-btn{
            width: fit-content;
            margin: auto;
            margin-top: 20px;
            padding: 3px 40px;
            color: white;
            font-weight: bold;
            text-align: center;
            background: $primaryColor;
            border-radius: 3px;
            font-size: .7rem;
        }
    }

    .header {
        border-bottom: 1px solid #e8eaed;
    }

    .topList {
        position: fixed;
        width: 100%;
        margin-top: 2.2rem;
        height: 2rem;
        z-index: 100;
    }

    .list-wrapper {
        .item {
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            background-color: #fff;
            border-bottom: 1px solid #EEEFF2;
        }

        .title {
            font-size: 0.7rem;
            font-weight: bold;
            margin-left: 0.7rem;
            margin-top: 0.7rem;
        }

        .income {
            color: $primaryColor !important;
        }

        .expend {
            color: #333 !important;
        }

        .subtitle {
            font-size: 0.6rem;
            color: #666;
            margin-left: 0.7rem;
            margin-top: 0.4rem;
            margin-bottom: 0.5rem;
        }

        .date {
            color: #666;
            font-size: 0.9rem;
            position: absolute;
            top: 0.9rem;
            right: 0.7rem;
        }
    }

    .agent-carry {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0.7rem;
        border-bottom: 1px solid #EEEFF2;

        .agent-carry-left {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .agent-carry-head {
                width: 75vw;
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                .agent-carry-head-title {
                    font-size: .7rem;
                    font-weight: bold;
                }

                .agent-carry-head-time {
                    font-size: .6rem;
                    color: #B5B5B5;
                }
            }

            .agent-carry-bottom {
                font-size: .6rem;
                color: #B5B5B5;
            }
        }

        .agent-carry-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            color: $primaryColor;

            .agent-carry-price {
                font-size: .7rem;
                font-weight: bold;
            }

            .agent-carry-type {
                font-size: .6rem;
                font-weight: bold;
                margin-top: 8px;
            }
        }
    }

    .agent-main {
        box-sizing: border-box;
        width: 92vw;
        height: 40vw;
        margin: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 4vw;
        color: white;
        background-image: url("../../../assets/image/home/agent-bg.png");
        background-size: 92vw 40vw;
        margin-top: 4vw;

        .agent-main-left {
            display: flex;
            flex-direction: column;

            .agent-main-left-title {
                font-size: .7rem;
            }

            .agent-main-left-price {
                font-size: 1.5rem;
                font-weight: bold;
            }
        }

        .agent-main-right {
            font-size: .7rem;
            font-weight: bold;
            padding: 3px 15px;
            border: 1px solid white;
            border-radius: 100px;
        }
    }

    .agent-switch {
        padding: 4vw 0;
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        .agent-switch-list {
            padding: 2vw 0;
            font-size: .7rem;
            font-weight: bold;
        }

        .active {
            border-bottom: 2px solid $primaryColor;
            color: $primaryColor;
        }
    }
</style>
